<template>
	<view>
		<!-- 搜索 -->
		<view class="py-2 seach bg-white d-flex j-center a-center">
			<view class="px-3 d-flex py-1 rounded-50 span-18 bg-light-secondary">
				<u-icon name="search" color="" size="28"></u-icon>
				<input class="ml-2" type="text" placeholder="搜索订单" @click="sendSeach(paymentList)" focus
					disabled="true" />
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{'height':scrollHeight}" :scroll-top="scrollTop" @scroll="scroll"
			@scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore">
			<!-- 待付款 -->
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view v-else>
				<view v-if="paymentList.length<=0" class="d-flex flex-column w-100 a-center j-center"
					:style="{'height':scrollHeight}">
					<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
					<view class="">暂无订单</view>
				</view>
				<view v-else class="m-2 bg-white rounded-20" @click="send_detail(item)"
					v-for="(item,index) in paymentList" :key="index">
					<view class="today_title px-3 py-2 rounded-top">
						<view class="d-flex j-sb pt">
							<view class="d-flex a-center">
								<view class="mr-1 rounded-50 d-flex user_img j-center a-center">
									<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
								</view>
								<view class="">{{item.mobile}}</view>
							</view>
							<view class="">{{item.label_order_status}}</view>
						</view>
						<view class="d-flex j-sb text-light-muted">
							<view class="">{{item.create_time}}</view>
							<view class="">{{item.order_sn}}</view>
						</view>
					</view>
					<view class="p-3">
						<view class="d-flex a-center j-sb p-position" v-if="item.goods_items.length>1">
							<view class="d-flex a-center">
								<view class="mr-1" v-for="(imgItem,imgIndex) in item.goods_items" :key="imgIndex">
									<image class="today_hot rounded-20"
										:src="imgItem.img.url?imgItem.img.url:defaltImage" mode=""></image>
								</view>
								<view class="mr-2" v-if="item.goods_items.length>3">
									<u-icon name="more-dot-fill" color="#eaeaea" size="50"></u-icon>
								</view>
							</view>

							<image class="d-block" v-if="item.zhufahuo == 1"
								style="width: 170rpx;height: 60rpx;transform: rotate(-20deg);position: absolute;right: 0;"
								src="../../static/zhufahuo.png" mode=""></image>
						</view>
						<view class="d-flex j-sb a-center p-position" v-else>
							<view class="d-flex">
								<view class="">
									<image class="today_hot rounded-20" :src="item.goods_items[0].img.url" mode="">
									</image>
								</view>
								<view class="m-2">
									<view class="ellipsis">{{item.goods_items[0].name}}</view>
									<!-- <view class="text-light-muted">属性：500g</view> -->
								</view>
							</view>
							<image class="d-block" v-if="item.zhufahuo == 1"
								style="width: 170rpx;height: 60rpx;transform: rotate(-20deg);position: absolute;right: 0;"
								src="../../static/zhufahuo.png" mode=""></image>
						</view>

						<view class="py-1">
							<text>共{{item.goods_items[0].goods_number}}件</text><text>合计:{{item.formated_total_fee}}</text>
						</view>
						<view class="d-flex j-end">
							<view class="py-1 px-3 border rounded-50" @click.stop="order_payment(item)">付款</view>
							<view class="py-1 px-3 border ml-2 rounded-50" @click.stop="order_mouse(item)">改价</view>
							<view class="py-1 px-3 border ml-2 rounded-50" @click.stop="mentClose(item)">取消</view>
						</view>
					</view>
				</view>
				<view class="pb-2" v-if="!paymentList.length<=0">
					<view class="" v-if="paymentList.length==total" @click="loadmores">
						<u-loadmore status="nomore" icon-type="circle" />
					</view>
					<view class="" v-else>
						<u-loadmore status="loading" icon-type="circle" />
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				paymentList: "", // 待付款列表
				scrollHeight: 0, // 屏幕高度
				u_loadmore: true, // 加载中
				triggered: false, // 下拉刷新
				more: 1, // 第几页
				count: 10, // 条数
				total: 0, // 总条数
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		onReady() {
			let _this = this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
					})
				}
			})
		},
		methods: {
			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 加载数据
			getData() {
				this.$H.post("admin/orders/list", {
					type: "await_pay",
					pagination: {
						count: this.count,
						page: this.more
					}
				}).then(res => {
					this.paymentList = res.data
				})
			},
			// 上拉加载函数
			scrolltolower(e) {
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if (that.paymentList.length == that.total) {
					return
				} else {
					setTimeout(() => {
						that.getData()
					}, 1000)
				}
			},
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 回到顶部
			loadmores() {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},

			// 订单搜索页
			sendSeach(item) {
				uni.navigateTo({
					url: "/pagesA/order/order-today-seach?order_status_code=" + item[0].order_status_code
				})
			},
			// 详情页
			send_detail(item) {
				uni.navigateTo({
					url: "/pagesA/order/order-today-send-detail?order_id=" + item.order_id
				})
			},
			// 付款
			order_payment(item) {
				uni.navigateTo({
					url: "/pagesA/order/order-confirm?order_id=" + item.order_id
				})
			},
			// 改价
			order_mouse(item) {
				uni.navigateTo({
					url: "/pagesA/order/order-mouse?order_id=" + item.order_id
				})
			},
			// 关闭
			mentClose(item) {
				uni.navigateTo({
					url: "/pagesA/order/order-close?order_id=" + item.order_id
				})
			}
		},
		onShow() {
			this.$H.post("admin/orders/list", {
				type: "await_pay",
				pagination: {
					count: this.count,
					page: this.more
				},
			}).then(res => {
				this.paymentList = res.data
			})
		},
		onLoad() {
			this.$H.post("admin/orders/list", {
				type: "await_pay",
				pagination: {
					count: this.count,
					page: this.more
				},
			}).then(res => {
				this.total = res.paginated.total
				this.paymentList = res.data
				this.u_loadmore = false
			})
			// 下拉刷新
			this._freshing = false;
		}
	}
</script>

<style>
	.user_img {
		width: 40upx;
		height: 40upx;
		background-color: #ffd1d0;
	}

	.today_title {
		background-color: #f6efef;
	}

	.today_hot {
		width: 150upx;
		height: 150upx;
	}
</style>